<template>
  <div style="height: 100%">
    <el-card style="height: 100%">
      <!-- 1.面包屑 -->
      <MyBread url="coach" level1="练车时间安排" />
      <!-- 2.日期段选择 -->
      <h2>教练练车时间安排</h2>
      <span class="el-form-item__label distance">练车日期设置</span>
      <el-date-picker
        :disabled="disableAll"
        v-model="DateSlot"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="width"
      ></el-date-picker>
      <!-- 3.时间段选择-->
      <span class="el-form-item__label distance">开始时间</span>
      <el-time-select
        :disabled="disableAll"
        placeholder="起始时间"
        v-model="TimeSlot.startTime"
        :picker-options="{
          start: '07:00',
          step: '00:30',
          end: '09:00',
        }"
        class="width"
      ></el-time-select>
      <span class="el-form-item__label distance">结束时间</span>
      <el-time-select
        :disabled="disableAll"
        placeholder="结束时间"
        v-model="TimeSlot.endTime"
        :picker-options="{
          start: '16:00',
          step: '00:30',
          end: '19:00',
          minTime: TimeSlot.startTime,
        }"
        class="width"
      ></el-time-select>
      <span class="el-form-item__label distance">间隔时间设置</span>
      <el-select
        v-model="IntervalTime"
        placeholder="间隔时间"
        :disabled="disableAll"
        class="width"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <span class="el-form-item__label distance"
        >间隔时间内练车学员人数设置</span
      >
      <el-select
        v-model="TrainNumber"
        placeholder="学员人数"
        :disabled="disableAll"
        class="width"
      >
        <el-option
          v-for="item in trainNum"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <div style="float: right; margin-top: 30px">
        <el-button type="primary" @click="updateArrange()" plain round
          >修改信息</el-button
        >
        <el-button type="success" @click="saveTimeArrange" plain round
          >保存信息</el-button
        >
        <el-button @click="cancelTimeArrange()" round>取消修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Schedule",
  data() {
    return {
      id: 0, // 时间安排ID，用来修改时间安排
      DateSlot: [], // 练车日期段
      TimeSlot: {
        // 默认设置开始时间为：08:00 结束时间为：17:00
        startTime: "08:00",
        endTime: "17:00",
      },
      disableAll: true, // 控制是否禁用
      IntervalTime: "01:00", // 默认设置为 1 小时，配合 options 使用
      options: ["01:00", "02:00"], // 间隔时间段选项
      TrainNumber: 2, // 默认设置为 2 人，配合 trainNum 使用
      trainNum: [2, 3, 4, 5, 6, 7, 8, 9, 10], // 人数选项
    };
  },
  methods: {
    // 修改信息按钮操作
    async updateArrange() {
      if (
        !(await this.haveThisPermission(this.$route.path, "修改练车时间安排"))
      ) {
        this.$message.warning("您当前没有该权限");
        return;
      }
      this.disableAll = false;
    },
    // 将选择好的时间段放入数据库
    async saveTimeArrange() {
      // 判断是否选择日期 -- 其他都有默认值，不用判断
      if (this.DateSlot.length === 0) {
        this.$message.info("请选择日期");
        return false;
      }
      // 判断日期时间段是否超出7天
      if (
        new Date(this.DateSlot[1]).getTime() -
          new Date(this.DateSlot[0]).getTime() >
        3600 * 1000 * 24 * 6
      ) {
        this.$message.warning("最长练车时间安排日期不能超过七天");
        return;
      }
      // 判断是否允许修改数据
      if (!this.disableAll) {
        // 封装数据
        let arrange = {
          identify: this.CurrentCoachInfo.identify,
          coachName: this.CurrentCoachInfo.name,
          startDate: this.DateSlot[0],
          endDate: this.DateSlot[1],
          startTime: this.TimeSlot.startTime,
          endTime: this.TimeSlot.endTime,
          intervalTime: this.IntervalTime,
          TrainNumber: this.TrainNumber,
        };
        // 判断是否为第一次安排时间
        if (this.CurrentCoachInfo.isArranged) {
          // 更新操作 -- 第N次安排时间
          await this.$https.updateUserData("/timeArrange", this.id, arrange);
          this.disableAll = true;
          this.$message.success("练车时间安排成功");
        } else {
          // 添加操作 -- 第一次安排时间
          await this.$https.addUserData("/timeArrange", arrange);
          // 修改教练 isArranged 属性
          this.CurrentCoachInfo.isArranged = true;
          await this.$https.updateUserData("/coach", this.CurrentCoachInfo.id, this.CurrentCoachInfo);
          this.disableAll = true;
          this.$message.success("练车时间安排成功");
        }
      } else {
        // 不允许修改数据 -- 提示信息进行修改
        this.$message.info("目前信息不可修改，请点击修改信息");
      }
    },
    // 取消时间安排
    cancelTimeArrange() {
      if (!this.disableAll) {
        this.disableAll = true;
        // 重新获取安排时间数据
        this.DateSlot = [];
        this.getArrangedTime(this.CurrentCoachInfo.identify);
        this.$message.info("已取消修改");
      }
    },
    async getArrangedTime(identify) {
      // 可以使用vuex -- 不必要
      const { data: arrange } = await this.$https.getUserData({
        url: "/timeArrange",
        identify,
      });
      if (arrange.length !== 0) {
        this.DateSlot.push(arrange[0].startDate);
        this.DateSlot.push(arrange[0].endDate);
        this.TimeSlot.startTime = arrange[0].startTime;
        this.TimeSlot.endTime = arrange[0].endTime;
        this.IntervalTime = arrange[0].intervalTime;
        this.TrainNumber = arrange[0].TrainNumber;
        this.id = arrange[0].id;
      }
    },
  },
  computed: {
    ...mapState("CoachModule", ["CurrentCoachInfo"]),
  },
  async mounted() {
    // 获取登录用户的信息 -- 教练信息
    await this.$store.dispatch("CoachModule/getCurrentCoachInfo");
    // 获取安排时间的信息 -- 有则进行赋值，没有则使用默认空数据
    this.getArrangedTime(this.CurrentCoachInfo.identify);
  },
};
</script>

<style scoped>
h2 {
  font-weight: 900;
  font-family: "Courier New", Courier, monospace;
  margin-top: 30px;
}
.distance {
  margin-left: 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 15px;
}
.width {
  width: 100%;
  margin-left: 10px;
}
</style>